//用解构的方式从gulp中拿出我们要用的api
const { dest, src, series, parallel, watch } = require('gulp')
//引入自动加载插件模块
const loadPlugins = require('gulp-load-plugins')
//引入构建服务器模块
const browserSync = require('browser-sync')
//自动加载插件
const plugin = new loadPlugins()
//创建一个开发服务器
const bs = browserSync.create()

//假数据
const data = {
    menus: [
        {
            name: 'Home',
            icon: 'aperture',
            link: 'index.html'
        },
        {
            name: 'Features',
            link: 'features.html'
        },
        {
            name: 'About',
            link: 'about.html'
        },
        {
            name: 'Contact',
            link: '#',
            children: [
                {
                    name: 'Twitter',
                    link: 'https://twitter.com/w_zce'
                },
                {
                    name: 'About',
                    link: 'https://weibo.com/zceme'
                },
                {
                    name: 'divider'
                },
                {
                    name: 'About',
                    link: 'https://github.com/zce'
                }
            ]
        }
    ],
    pkg: require('./package.json'),
    date: new Date()
}

//清除不需要的
const clean = () => {
    return del(['dist', 'temp'])
}
//处理css
const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }).pipe(plugin.sass())
        .pipe(dest('dist'))
}
//处理js
const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' }).pipe(plugin.babel({
        presets: ['@babel/preset-env']
    }))
        .pipe(dest('dist'))
}
//处理html
const page = () => {
    return src("src/*.html", { base: 'src' }).pipe(plugin.swig({ data })).pipe(dest('dist'))
}
//处理图片
const image = () => {
    return src("src/assets/images/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}
//处理字体
const fonts = () => {
    return src("src/assets/fonts/**", { base: 'src' }).pipe(plugin.imagemin()).pipe(dest('dist'))
}
//处理公
const extra = () => {
    return src("public/**", { base: 'public' }).pipe(dest('dist'))
}

// 把服务器放到一个任务当中
//image fonts public暂时不需要监视
const serve = () => {
    watch("src/assets/styles/*.scss", style)
    watch("src/assets/scripts/*.js", script)
    watch("src/*.html", page)
    // watch("src/assets/images/**",image)
    // watch("src/assets/fonts/**",fonts)
    // watch("public/**",extra)
    watch([
        'src/assets/images/**',
        'src/assets/scripts/*.js',
        'src/*.html'
    ], bs.reload)
    // 初始化开发服务器
    bs.init({
        server: {
            port: 8080,// 修改启动端口
            // baseDir: 'dist',
            baseDir: ["dist", "public", "src"],// 要监听的哪些文件，可以使用通配符
            files: 'dist/**',
            // open:false,
            routes: {//这个是优先于 根目录的配置，先看在 routes 里面有没有对应的配置，如果有，先走这
                '/node_modules': "node_modules"
            }
        }
    })
}
const compile = parallel(page, script)

//此处才是真正上线才执行的
const build = parallel(compile, fonts, image, extra)
//开发时
const develop = series(compile, serve)

module.exports = {
    clean,
    compile,
    build,
    develop
}